
<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form"  :model="mdl" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-form-model-item  :label="i18n('form.name','名称')" prop = "name">
                            <a-input :placeholder="i18n('form.name','名称','input')" v-model="mdl.name"/>
                        </a-form-model-item>
                        <a-form-model-item  :label="i18n('task.taskName','任务名称')"  >
                            <span>{{mdl.jobTask}}</span>
                        </a-form-model-item>
                        <a-form-model-item  :label="i18n('task.strategy','策略')" >
                            <a-radio-group :options="modeOptions" v-model="strategyObj.mode" @change="modeChange"/>
                            <div style="width: 70%">
                                <div v-if="strategyObj.mode=='one'">
                                    <a-date-picker v-model="date" @change="dateChange"
                                                   show-time
                                                   format="YYYY-MM-DD HH:mm:ss"
                                                   :placeholder="i18n('task.startTimeDesc','请选择开始时间')" />
                                </div>
                                <div v-else-if="strategyObj.mode=='day_minute'">
                                    <a-select :options="minuteOptions"  :placeholder="i18n('task.timeDesc','请选择时间')" v-model="strategyObj.config.value"
                                              :getPopupContainer="(p)=>p.parentNode"></a-select>
                                </div>
                                <div v-else-if="strategyObj.mode=='day_hour'">
                                    <a-time-picker format="HH:mm" :placeholder="i18n('task.timeDesc','请选择时间')" @change="dayHourChange"  v-model="day_hour"/>
                                </div>
                                <div v-else-if="strategyObj.mode=='week'">
                                    <a-checkbox-group :options="weekOptions"  v-model="strategyObj.config.value"></a-checkbox-group>
                                    <a-time-picker format="HH:mm" v-model="time" :placeholder="i18n('task.timeDesc','请选择时间')" @change="timeChange"/>
                                </div>
                                <div v-else-if="strategyObj.mode=='month'">
                                    <div>
                                        <a-checkbox-group  v-model="strategyObj.config.value">
                                            <a-checkbox v-for="index in 31" :value="index">{{ index }}</a-checkbox>
                                        </a-checkbox-group>
                                    </div>
                                    <a-time-picker format="HH:mm" v-model="time" :placeholder="i18n('task.timeDesc','请选择时间')" @change="timeChange"/>
                                </div>
                                <div v-else-if="strategyObj.mode=='cron'" >
                                    <a-input :placeholder="i18n('task.cron','Cron表达式','input')" v-model="strategyObj.config.value"/>
                                </div>
                            </div>
                        </a-form-model-item>

                        <a-form-model-item  :label="i18n('form.status','状态')" prop = "status">
                            <a-radio-group  v-model="mdl.status" :default-value="1">
                                <a-radio :value="1">{{i18n('form.enable','启用')}}</a-radio>
                                <a-radio :value="0">{{i18n('form.disable','停用')}}</a-radio>
                            </a-radio-group>

                        </a-form-model-item>

                </a-form-model>


            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
    import SysJobApi from '@/api/system/core/sysJob'
    import {RxDialog,BaseFormModel} from "@lowcode/jpaas-common-lib";


    export default {
        name: 'SysJobEdit',
        props:{
            /**
             * {
             *     jobTaskId:"",
             *     jobTask:""
             * }
             */
            jobTask:{
                type:Object
            }
        },
        mixins:[BaseFormModel],
        components: {
            RxDialog,
        },
        data(){
            return {
                strategyObj: {mode: "one", config: {}},
                modeOptions: [
                    {label: this.i18n('task.one','一次'), value: "one"},
                    {label: this.i18n('task.dayMinute','每天(分)'), value: "day_minute"},
                    {label: this.i18n('task.dayHour','每天(时分)'), value: "day_hour"},
                    {label: this.i18n('task.week','每周'), value: "week"},
                    {label: this.i18n('task.month','每月'), value: "month"},
                    {label: this.i18n('task.cron','Cron表达式'), value: "cron"},
                ],
                //分钟
                minuteOptions: [
                    {label: this.i18n('task.minute1','1分钟'), value: "1"},
                    {label: this.i18n('task.minute2','5分钟'), value: "5"},
                    {label: this.i18n('task.minute3','10分钟'), value: "10"},
                    {label: this.i18n('task.minute4','15分钟'), value: "15"},
                    {label: this.i18n('task.minute5','30分钟'), value: "30"},
                    {label: this.i18n('task.minute6','60分钟'), value: "60"},
                ],
                //周  MON, TUE, WED, THU, FRI, SAT,SUN,
                weekOptions: [
                    {label: this.i18n('task.mon','星期一'), value: "MON"},
                    {label: this.i18n('task.tue','星期二'), value: "TUE"},
                    {label: this.i18n('task.wed','星期三'), value: "WED"},
                    {label: this.i18n('task.thu','星期四'), value: "THU"},
                    {label: this.i18n('task.fri','星期五'), value: "FRI"},
                    {label: this.i18n('task.sat','星期六'), value: "SAT"},
                    {label: this.i18n('task.sun','星期日'), value: "SUN"}
                ],
                rules: {
                    name: [{ required:true,message: this.i18n('form.name','名称','input'), trigger: 'change' }],
                },

                //日期
                date:"",
                day_hour:"",
                //时间
                time:"",
            }

        },

        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"SysJobTask",key);
            },
            onload_(data){
                if(!data){
                    this.$set(this.mdl,"status",1);

                    if(this.jobTask){
                        Object.assign(this.mdl,this.jobTask)
                    }
                    return;
                }
            },
            get(id){
                return SysJobApi.get(id);
            },
            save(){
                return SysJobApi.save(this.mdl);
            },
            modeChange(){
                this.strategyObj.config={};
                this.time="";
            },
            timeChange(value){
                var time="";
                if(value){
                    time=moment(value).format("H:m");
                }
                this.$set(this.strategyObj.config,"time",time);
                this.setStrategy();
            },
            dateChange(value){
                var date="";
                if(value){
                    date=moment(value).format("YYYY-MM-DD HH:mm:ss");
                }

                this.$set(this.strategyObj.config,"value",date);
            },
            dayHourChange(value){
                var date="";
                if(value){
                    date=moment(value).format("H:m");
                }
                this.$set(this.strategyObj.config,"value",date);
            },
            setStrategy(){
                if((this.strategyObj.mode== 'week' || this.strategyObj.mode== 'month') && !this.strategyObj.config.time){
                    this.strategyObj.config.time="0:0"
                }
                this.$set(this.mdl,"strategy",JSON.stringify(this.strategyObj));
            }

        },
        watch:{
            "strategyObj.config.value":function (val,oldVal){
                if(val){
                    this.setStrategy();
                    if(this.strategyObj.mode== 'one'){
                        this.date=moment(val,"YYYY-MM-DD HH:mm:ss");
                    }else if(this.strategyObj.mode== 'day_hour'){
                        this.day_hour=moment(val,"H:m");
                    }
                }
            },
            "mdl.strategy":function (val,oldVal){
                if(oldVal==undefined){
                    this.strategyObj=JSON.parse(val);
                }
            },
            "strategyObj.config.time":function (val,oldVal){
                if(val){
                    this.time=moment(val,"H:m");
                }
            }
        }
    }
</script>
<style>
    .relick a{
        margin-right: 10px;
    }

</style>
